<template>
    <div>
        <el-dialog
  title="创建用户"
  :visible.sync="centerDialogVisible"
  :before-close="close"
  width="60%"
  center>



  <el-form :model="form" :rules="rules" ref="form" label-width="100px" class="demo-ruleForm">
    
  <el-form-item label="活动名称" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>

 <el-form-item label="邮箱" prop="email">
    <el-input v-model="form.email"></el-input>
  </el-form-item>

   <!-- <el-form-item label="密码" prop="password">
    <el-input v-model="form.password"></el-input>
  </el-form-item> -->

   <el-form-item label="角色" prop="role">
    <el-input v-model="form.role"></el-input>
  </el-form-item>

   <el-form-item label="权限组名称" prop="permission_group_title">
    <el-select v-model="form.permission_group_title" placeholder="请选择">
      <el-option label="超级管理员" value="shanghai"></el-option>
      <el-option v-for="(items) in list1" :value="items.id" :key="items.id" :label="items.title">
                </el-option>
    </el-select>
  </el-form-item>

   <el-form-item label="联系电话" prop="phone">
    <el-input v-model="form.phone"></el-input>
  </el-form-item>

 <el-form-item label="介绍" prop="avatar" >
    <el-input type="textarea" v-model="form.avatar" placeholder="Please input"></el-input>
  </el-form-item>

</el-form>


  <span slot="footer" class="dialog-footer">
    <el-button @click="quxiao">取 消</el-button>
    <el-button type="primary" @click="submit">确 定</el-button>
  </span>
</el-dialog>

    </div>
</template>

<script>
import {add , update } from '../../api/base/users'
import {list} from '../../api/base/permissions'
export default {
    name: 'qeqeqeqe',

    data() {
        return {
             centerDialogVisible: false,

              form: {
        },
        rules: {
          username: [
            { required: true, message: '用户名不能为空', trigger: 'blur' },
          ],
          email: [
            { required: true, message: '邮箱不能为空', trigger: 'change' }
          ],
          // password: [
          //   {required: true, message: '密码不能为空', trigger: 'change' }
          // ],
          role: [
            
          ],
          permission_group_title: [
          ],
          phone: [
          ],
          avatar: [
          ]
        },
        list1:[]
 
        };
    },

    mounted() {
        
    },

    created(){
    this.list()
    },

    methods: {
          // 清空表格
    close(){
      this.centerDialogVisible = false
      this.$refs.form.resetFields()
    //   this.fileList = []
      this.form={}
    //   console.log(this.form,'为什么清空不生效,生效啦');
    },
   quxiao(){
     this.close()
   },

     async submit(){
       console.log(this.form.id)
      await this.$refs.form.validate()
       this.form.id ? await update({id:this.form.id}) : await add(this.form)   
       this.$message.success(`${this.form.id ? '编辑' : '新增'}成功`)
       this.close()
       this.centerDialogVisible = false
       this.$parent.list()
          
       },

       async list(){
        const res = await list()
        console.log(res.data.list)
        this.list1 = res.data.list
        // .map(item => {
        //   return item.title
        // })
        console.log(this.list1);

       }
    },
};
</script>

<style lang="scss" scoped>

</style>